<template>
	<view>
	<scroll-view show-scrollbar="false" @scroll="scroll" :scroll-top="scrollTop" scroll-y
		class="msg-list">
		<view class="padding">
			<view class="msg fex " v-for="(item,index) in msglist" :key="index"
				:class="item.useType==1?'right-mesbox':''">
				
				<u--image radius="50" :showLoading="true" src="../../static/img/index/avatar.png" width="2rem" height="2rem"></u--image>
				<view class="messagebox" :class="item.useType==1?'right-mes-radius':''">
					{{item.content}}
				</view>
			</view>
			<view class="boot ">
				<input type="text" v-model="message" />
				<u-button @click="sendMessage" class="button" type="primary" size="mini" text="发送"></u-button>
			</view>
		</view>
	</scroll-view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				scrollTop: null,
				loadMoreData: null,
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				websocket: null,
				userId: null,
				message: '',
				sendMsg: '',
				msglist: []
			}
		},
		computed: {
			...mapGetters(['getUserInfo'])
		},
		mounted() {
			// 判断当前平台是否支持WebSocket

			this.websocket = uni.connectSocket({
				url: 'ws://127.0.0.1:3432/ws/websocket/1',
				complete: () => {
					this.sendMessage('连接已建立！');
				},
			});

			this.websocket.onMessage((res) => {
				const result = res.data;
				const ob = JSON.parse(result);

				// 判断用户状态
				if (ob.state !== undefined && ob.state !== 'success') {
					this.sendMessage('非法连接！');
					this.websocket.close();
				}

				// 判断是否有消息
				if (ob.msg !== undefined) {
					this.sendMessage();
					this.msglist.push({
						content: ob.msg,
						useType: 0
					})

				}
				console.log(this.msglist);
			});

			this.websocket.onClose(() => {
				this.sendMessage('close');
			});

			// // 监听窗口关闭事件
			// uni.onBeforeUnload(() => {
			// 	this.websocket.close();
			// });


		},
		beforeDestroy() {
		    this.websocket.close();
		},
		methods: {
			scroll() {
				// 处理滚动事件
			},
			// loadMoreData() {
			// 	// 处理加载更多数据事件
			// },
			sendMessage() {

				// 发送消息
				if (this.message.trim() !== '') {
					const data = {
						type: 'message',
						content: this.message,
					};
					this.websocket.send({
						data: this.message,
					});
					console.log(this.message);
					const hs = {
						content: this.message,
						useType: 1
					}
					this.msglist.push(hs)
					// 清空输入框
					this.message = '';
				}
			},
			handleMessage(event) {
				// 处理收到的WebSocket消息
				const data = JSON.parse(event.data);
				// 根据消息类型处理逻辑
				if (data.type === 'message') {
					// 处理消息
					console.log('Received message:', data.content);
				}
			}
		}
	}
</script>

<style lang="scss">
	.msg {
		padding: 0.2rem 0;

		/* 控制交叉轴上的对齐方式 */
	}
    uni-page-body{
		background-color: transparent !important;
	}
	.messagebox {
		margin-left: 0.3rem;
		background-color: #ffffff;
		padding: 0.2rem 0.2rem;
		border-radius: 1rem;
		border-bottom-left-radius: 0;

	}

	.right-mes-radius {
		margin-right: 0.3rem;
		background-color: #9df2ff;
		padding: 0.2rem 0.2rem;

		border-radius: 1rem;
		border-bottom-right-radius: 0;
	}

	.right-mesbox {
		display: flex;
		flex-direction: row-reverse;
		/* 互换位置的关键 */
		align-items: center;

	}

	.fex {
		display: flex;
		align-items: center;

	}

	.boot {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
		width: 100vw;
		height: 2rem;
		display: flex;
		align-items: center;
		justify-content: center;

		input {
			width: 70vw;
			height: 1.4rem;
			line-height: 1rem;
			font-size: 0.8rem;
			padding: 0.3rem;
			background-color: #e7ecff;
		}

		.button {
			width: 2rem;
			height: 1rem;
			padding: 0.5rem;
			margin-left: 0.4rem
		}
	}
</style>